<template>
  <div>
    <div id="box">
    	<div class="top">
    		<img src="../assets/img/mi.png" />
    		<p>小米商城<br/><span>让每个人都能享受科技的乐趣</span></p>
    	</div>

    	<div class="centre">
    		<div class="login">
    			<ul>
    				<li class="li-1">账号登录</li>
    				<li class="li-2">扫码登录</li>
    			</ul>
    			<form action="" method="post">
    				<input class="input-text" type="text" placeholder="  邮箱/手机号/小米ID"/><br />
            <input class="input-text" type="password" placeholder="  密码"/><br />
    				<input class="input-button" type="button" value="登录"/>
    				<p>手机短信登录/注册</p>
    			</form>
    			<div class="log">
    				<img src="../assets/img/logint.png" />
    			</div>
    		</div>
    	</div>

    	<div class="end">
    		<ul>
    			<li class="li">简体</li>
    			<li class="li">繁体</li>
    			<li class="li">English</li>
    			<li class="li">常见问题</li>
    			<li>隐私政策</li>
    		</ul>
    		<p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
    	</div>
    </div>
  </div>
</template>

<script>
  export default{
		data(){
			return{

			}
		},
		components:{

		},
		methods:{

		}
	}
</script>

<style type="text/css">
  #box {
    width: 100%;
  }

  #box .top {
    width: 100%;
    height: 80px;
    line-height: 30px;
    display: table-cell;
    vertical-align: middle;
  }

  #box .top img {
    width: 40px;
    height: 40px;
    float: left;
    margin-left: 310px;
  }

  #box .top p {
    margin: 0;
    padding: 0;
    float: left;
    margin-left: 12px;
    font-size: 24px;
  }

  #box .top p span {
    position: absolute;
    top: 48px;
    font-size: 8px;
    color: #333333;
  }

  #box .centre {
    width: 100%;
    height: 450px;
    background: url(../assets/img/section.jpg);
    background-size: 100% 100%;
    border: 1px solid #333333;
  }

  #box .centre .login {
    width: 20%;
    height: 450px;
    float: left;
    margin-left: 900px;
    background: #FFFFFF;
  }

  #box .centre .login ul {
    height: 45px;
    padding: 20px;
  }

  #box .centre .login ul li {
    list-style: none;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    margin-left: 8px;
  }

  #box .centre .login ul .li-1::after {
    content: "|";
    margin-left: 30px;
    margin-right: 22px;
    color: #616161;
  }

  #box .centre .login ul .li-1 {
    color: #FF6700;
  }

  #box .centre .login ul .li-2:hover {
    color: #FF6700;
  }

  #box .centre form .input-text {
    width: 90%;
    height: 34px;
    margin-left: 5%;
  }

  #box .centre form .input-password {
    margin: 10px;
    width: 90%;
    height: 34px;
    margin-left: 5%;
  }

  #box .centre form .input-button {
    margin: 10px;
    width: 91%;
    height: 40px;
    margin-left: 5%;
    background: #FF6700;
    border: none;
    color: #FFFFFF;
    font-size: 12px;
  }

  #box .centre form p {
    margin: 0;
    padding: 0;
    font-size: 10px;
    margin-left: 5%;
    color: #FF6700;
  }

  #box .centre .log {
    position: absolute;
    width: 19.8%;
    height: 120px;
    top: 418px;
  }

  #box .centre .log img {
    width: 100%;
  }

  #box .end {
    width: 100%;
  }

  #box .end ul {
    position: absolute;
    left: 40%;
    top: 80%;
  }

  #box .end ul li {
    list-style: none;
    display: inline-block;
    font-size: 12px;
    color: #757C8B;
  }

  #box .end ul .li::after {
    content: "|";
    margin-left: 8px;
    margin-right: 5px;
    color: #616161;
  }

  #box .end p {
    position: absolute;
    left: 36%;
    top: 85%;
    font-size: 12px;
    color: #616161;
  }
</style>
